<html>
<head>

<title>Dynamic styling</title>
<style>
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 600px; width:700px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script>
  var tableid = 297050;
  var map, layer;
  //var center = new google.maps.LatLng(-25, 130);
  var center = new google.maps.LatLng(37.1, -122.2);
  var zoom = 8;
 
  function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: center,
      zoom: zoom,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var styles = [
      {
        where: "delivers = 'no'",
        polygonOptions: {
          fillColor: "#0000FF",
          strokeColor: "#FF0000"
        }
      },
      {
        where: "delivers = 'yes'",
        polygonOptions: {
          fillColor: "#00FF00",
        }
      }
    ];  
    
    layer = new google.maps.FusionTablesLayer({
      query: {
        select: "'Delivery Zone'",
        from: tableid,
      },
      styles: styles,
    });
    //layer = new google.maps.FusionTablesLayer(tableid);
    layer.setMap(map);
  }
 
 

</script>
</head>

<body onload="initialize();">

<div id="map_canvas"></div>

</body>

</html>
